<template>
  <div class="content">
    <div>
      <mt-header fixed title="信息反馈"></mt-header>
    </div>
    <div class="from">
      <div class="list">
        <div class="list-item">
          <div class="lable">
            <img src="../../assets/icon/user.png" alt="">
            用户名
          </div>
          <div class="put">
            <input type="text" placeholder="请输入用户名" v-model="formData.user">
          </div>
        </div>
        <div class="list-item">
          <div class="lable">
            <img src="../../assets/icon/qq.png" alt="">
            QQ
          </div>
          <div class="put">
            <input type="number" placeholder="请输入QQ" v-model="formData.qq">
          </div>
        </div>
        <div class="list-item">
          <div class="lable">
            <img src="../../assets/icon/weixin.png" alt="">
            微信号
          </div>
          <div class="put">
            <input type="text" placeholder="请输微信号" v-model="formData.wechat">
          </div>
        </div>
        <div class="list-item">
          <div class="lable">
            <img src="../../assets/icon/phone.png" alt="">
            联系电话
          </div>
          <div class="put">
            <input placeholder="请输入手机号" type="number" v-model="formData.phone">
          </div>
        </div>
        <div class="list-item">
          <div class="lable">
            <img src="../../assets/icon/qustion.png" alt="">
            问题场景
          </div>
          <div class="put">
            <input placeholder="问题场景" v-model="formData.introduction">
          </div>
        </div>
        <div class="list-item">
          <div class="big-put">
            <textarea v-model="introductionDetail" placeholder="请输入问题描述" cols="35" rows="5"></textarea>
          </div>
        </div>
      </div>
      <div class="uploadimg">
        <div class="uploadtitle">&nbsp;相关截图</div>
        <upload-img></upload-img>
      </div>
      <div class="sumbit">
        <mt-button class="btn" type="primary">提交</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
  import uploadImg from '../../components/uploadImage' // 封装上传组件
  export default {
    components: {
      uploadImg
    },
    data() {
      return {
        formData: {
          user: '', // 用户
          qq: '', // qq
          wechat: '', // 微信
          phone: '', // 电话
          introduction: '', // 问题场景
          introductionDetail: '' // 问题详情
        }
      }
    }
  }

</script>
<style lang="scss" scoped>
  .content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgb(228, 222, 222);
  }

  .from {
    margin-top: 1rem;
    /* padding: 5px 5px 5px 5px; */
    border-radius: 4px;
    overflow: hidden;
    background: rgb(228, 222, 222);
  }

  .from {
    .list {
      background: white;
      padding: 0 0 0 10px;

      .list-item {
        border-bottom: 1px solid rgb(228, 222, 222);
        min-height: 53px;
        display: flex;
        // line-height: 53px;
        overflow: hidden;

        .lable {
          flex: none;
          font-size: 16px;
          width: 3rem;
          display: flex;
          align-items: center;

          img {
            width: 100%;
            height: 100%;
            width: 30px;
            height: 30px;
          }
        }

        .put {
          flex: 1;
          display: flex;
          align-items: center;

          input {
            height: 30px;
            width: 100%;
            outline: none;
            border: none;
          }

          input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #aab2bd;
            /* placeholder字体大小  */
            // font-size: 14px;
          }
        }

        .big-put {
          textarea {
            outline: none;
            border: none;
          }
        }

      }

      .list-item:last-child {
        border: none;
      }
    }
  }

  .uploadimg {
    background: white;
    // border-top: 1px solid #d9d9d9;
    padding: 20px 10px 0 10px;
    line-height: 16px;
  }

  .uploadtitle {
    border-left: 5px solid red;
    font-size: 16px;
  }

  .sumbit {
    margin: 20px 0;
    width: 100%;
    text-align: center;
  }

  .sumbit .btn {
    width: 100%;
  }

</style>
